window.addEventListener('load', function () {
    // this.alert(11);
    var arrow_l = this.document.querySelector('.arrow-l');
    var arrow_r = this.document.querySelector('.arrow-r');
    var focus = this.document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;
    //鼠标经过focus 就显示隐藏左右按钮
    focus.addEventListener('mouseenter', function () {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
    })
    focus.addEventListener('mouseleave', function () {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
    })
    //3.动态生成小圆圈  有几张图 就有生产几个小圆圈
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    for (var i = 0; i < ul.children.length; i++){
        //创建一个小li
        var li = document.createElement('li');
        //记录当前小圆圈索引号 通过自定义属性来做
        li.setAttribute('index', i);
        //把小li插入到ol里面
        ol.appendChild(li);
        //把ol的第一个小li设置类名为current
        ol.children[0].className = 'current';
    }
   //4.小圆圈的排他思想 生成小圆圈的同时直接绑定 点击事件
    li.addEventListener('click', function () {
        //干掉所有人 把所有的小li 清除 currernt 类名
        for (var i = 0; i < ol.children.length; i++){
            ol.children[i].className = '';
        }
        //留下我自己 当前小li设置类名 current
        this.className = 'current';
    })
    var index = this.getAttribute('index');
    // var focusWidth = focus.offsetWidth; 放外面变全局变量
    console.log(focusWidth);
    console.log(index);
    animate(ul, -index * focusWidth);
})